<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>jQuery WeUI</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description"
	content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

<link rel="stylesheet" th:href="@{/dist/lib/weui.min.css}" />
<link rel="stylesheet" th:href="@{/dist/css/jquery-weui.min.css}" />
<link rel="stylesheet" th:href="@{/dist/demos/css/demos.css}" />
<script type="text/javascript" th:src="@{/dist/lib/jquery-2.1.4.js}"></script>
<script type="text/javascript" th:src="@{/dist/js/jquery-weui.js}"></script>
<script type="text/javascript" th:src="@{/dist/lib/fastclick.js}"></script>
<link rel="stylesheet" th:href="@{/adminltecss/userl.css}" />
<link
	href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
	rel="stylesheet">

<style type="text/css">
#div_span a {
	margin: 0px 10px;
	color: black;
}
	.cusmar{
  		margin-left: 40px;
  	}
  	.header-wai{
  		position: fixed;top:0px; height:60px;background-color: #363436;
  	}
</style>

<script type="text/javascript" th:inline="javascript">
 /* 使用下面的符号可以是thymemale解析特殊符号 */
 /*<![CDATA[*/
 			
	 $(function(){
		 var countPage=[[${countPage}]];
		 for(var i=0;i<countPage;i++){
			 $option=$("<option>"+(i+1)+"</option>");
			 $("#span_input").append($option);
		 }
		
	 })
	 		 
		function getLocalTime(nS) {
			return new Date(nS).Format("yyyy-MM-dd hh:mm:ss");
		}
		Date.prototype.Format = function(fmt) {//author: meizz
			var o = {
				"M+" : this.getMonth() + 1, //月份
				"d+" : this.getDate(), //日
				"h+" : this.getHours(), //小时
				"m+" : this.getMinutes(), //分
				"s+" : this.getSeconds(), //秒
				"q+" : Math.floor((this.getMonth() + 3) / 3), //季度
				"S" : this.getMilliseconds() //毫秒
			};
			if (/(y+)/.test(fmt))
				fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt))
				fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		}
	 	
	 
	 /*点击详细信息跳转的界面  */
 		function xiangxi(domEle){
 			var mid=$(domEle).children(".weui-cell__bd").children(".mid").val();
 			
 		 window.location.href="/WBizController/xiangXiInfo?mid="+mid+"";
 						
 		}
	 /*选中当前页数  */
 		function selectDemo(curPage){
			
			
 			$("#span_input option").each(function(index,domEle){
 					
					if(index==(parseInt(curPage)-1)){
						console.log("selectDemo"+curPage);
						$(domEle).attr("selected","selected");
						console.log($(domEle).attr("selected"));
					}else{
						$(domEle).removeAttr("selected");
					}
					
					
					
			});
 		}	
 		/* 清空需要添加的父节点 */
	 function removeDiv(){
		 $("#all div").each(function(index,domEle){
				$(domEle).remove();
		});
	 }
	 /*传入当前页让下拉框选择对应的页数，传入结果添加节点  */
 	function ajaxDate(result,curPage){
 		var listPageInfo=result.listAllMessage;
		var countPage=result.countPage;	
		console.log(curPage)
 		selectDemo(curPage);		
 		removeDiv();			
		for(var i=0;i<listPageInfo.length;i++){			
			var messageDate=getLocalTime(listPageInfo[i].mdate);
			
			$div=$(" <div class='weui-cell weui-cell_access'  onclick='xiangxi(this)'  style='cursor:pointer'>"
					+" <div class='weui-cell__bd' ><input type='hidden' class='mid' value='"+listPageInfo[i].mid+"' />"
			         +" <span style='vertical-align: middle'>"+listPageInfo[i].mtitle+"</span>"
			         +"<span class='weui-badge' style='margin-left: 5px;'>1</span>"
			         +"<span  style='float:right;margin-right:20px;font-size:14px' >"+messageDate+"</span>"
			        +"</div><div class='weui-cell__ft' ></div></div>");
			$("#all").append($div);
		}			
 	}	
 		
 		function startDemo(){
 			
 			var curPage=1;
 			var selectVal=$("#span_input").val();
 			var searchInput=$("#searchInput").val();
 			var data;
 			
 			
 			if(selectVal=="1"){
 				return false;
 			}
			if(searchInput==""){
				
 				data={"curPage":"1"}
 			}else{
 				
 				data={"curPage":"1",
 	 					"searchInput":searchInput}
 			}
 			$.post(
 				"/WBizController/selectPageMessage",
 				data,
 				function(result){
 					ajaxDate(result,curPage) 				
 				},
 				"json"
 			);
 		}
 		function preDemo(){
 			var searchInput=$("#searchInput").val();
 			var curPage=$("#span_input").val();
			var data;
 			
 		
 			if((parseInt(curPage)-1)<=0){
 				return false;
 			}
 			
 			curPage=parseInt(curPage)-1;
			if(searchInput==""){
 				data={"curPage":curPage}
 			}else{
 				console.log(1);
 				data={"curPage":curPage, "searchInput":searchInput}
 			}
 			$.post(
 	 				"/WBizController/selectPageMessage",
 	 				data,
 	 				function(result){
 	 					ajaxDate(result,curPage)
 	 				
 	 				},
 	 				"json"
 	 			);
 		}
 		function nextDemo(){
 			var curPage=$("#span_input").val();
 			var searchInput=$("#searchInput").val();
 			var countPage=[[${countPage}]];
 			
			var data;
 			
 			
 			
 			if((parseInt(curPage)+1)>parseInt(countPage)){
 				return false;
 			}
 			curPage=parseInt(curPage)+1;
 			
			if(searchInput==""){
				
 				data={"curPage":curPage}
 			}else{
 				
 				data={"curPage":curPage,
 	 					"searchInput":searchInput}
 			}
 			$.post(
 	 				"/WBizController/selectPageMessage",
 	 				data,
 	 				function(result){
 	 					ajaxDate(result,curPage)
 	 				
 	 				},
 	 				"json"
 	 			);
 			}
 		
 		function endDemo(){
 			var curPage=[[${countPage}]];
 			var searchInput=$("#searchInput").val();
 			
			var data;
 			
 			if(searchInput==""){
				
 				data={"curPage":curPage}
 			}else{
 				
 				data={"curPage":curPage,
 	 					"searchInput":searchInput}
 			}
 			$.post(
 	 				"/WBizController/selectPageMessage",
 	 				data,
 	 				function(result){
 	 					ajaxDate(result,curPage)
 	 				
 	 				},
 	 				"json"
 	 			);
 		}
 		function changeSelect(domEle){
 			
 			var curPage=$(domEle).val();
 			
 			var searchInput=$("#searchInput").val();
 			
			var data;
 			
 			if(searchInput==""){				
 				data={"curPage":curPage}
 			}else{ 				
 				data={"curPage":curPage,"searchInput":searchInput}
 			}
 			console.log("传到后台的页数"+curPage)
 			$.post(
 	 				"/WBizController/selectPageMessage",
 	 				data,
 	 				function(result){
 	 					ajaxDate(result,curPage) 	 				
 	 				},
 	 				"json"
 	 			);
 		}
 		/*键盘弹起时搜索  */
 		function searchDemo(){
 			
 			var searchInput=$("#searchInput").val();
 			
 			var curPage=1;
 			$.post(
 	 				"/WBizController/selectPageMessage",
 	 				{
 	 					"curPage":curPage,
 	 					"searchInput":searchInput
 	 				},
 	 				function(result){
 	 					ajaxDate(result,curPage)
 	 				
 	 				},
 	 				"json"
 	 			);
 		}
 		
 		
 		
 		/*返回上一级  */
 		function returnDemo(){
 			window.history.back(-1); 
 		}
 		/*]]>*/
 </script>
</head>
<body ontouchstart>
<div class="weui-tabbar header-wai" style="">
  		<a href="" class="weui-tabbar__item"  id="cusdow">
          <div class="weui-tabbar__icon"></div>
          <p class="weui-tabbar__label" style="font-size: 20px; color: white; line-height: 1px;">
          	<span class="fa fa-angle-left fa-2x" style="color: white; float: left;line-height: 10px;" onclick="returnDemo()"></span>
          	通知列表<span class="fa fa-angle-down fa-2x" style="color: white;float: right; margin-right: 10px;line-height: 10px; " id="down"></span></p>
        </a>
      </div>

	<div class="weui-grids" style="margin-top:60px">
		
		<div class="weui-search-bar" id="searchBar">
			<div class="weui-search-bar__form">
				<div class="weui-search-bar__box">
					<i class="weui-icon-search"></i> <input type="search"
						class="weui-search-bar__input" id="searchInput" placeholder="搜索"
						onkeyup="searchDemo()"> <a href="javascript:"
						class="weui-icon-clear" id="searchClear"></a>
				</div>
				<label class="weui-search-bar__label" id="searchText"
					style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
					<i class="weui-icon-search"></i> <span>搜索</span>
				</label>
			</div>
			<a href="javascript:" class="weui-search-bar__cancel-btn"
				id="searchCancel">取消</a>
		</div>

		<div id="all">
			<div class="weui-cell weui-cell_access"
				th:each="message : ${listAllMessage}" th:inline="text"
				onclick="xiangxi(this)" style="cursor: pointer">
				<div class="weui-cell__bd">
					<input type="hidden" class="mid" th:value="${message.mid}" /> <span
						style="vertical-align: middle;" th:inline="text">[[${message.mtitle}]]</span>
					<span class="weui-badge" style="margin-left: 5px;">1</span> <span
						th:text="${#dates.format(message.mdate,'yyyy-MM-dd HH:mm:ss')}"
						style="float: right; margin-right: 20px;font-size:14px"></span>
				</div>
				<div class="weui-cell__ft"></div>
			</div>
		</div>
		<div id="div_span" style="text-align: center;margin-top:50px">
			<center>
				<a href="javascript:startDemo()">首页</a> <a
					href="javascript:preDemo()">上一页</a> 
					<span> <select id="span_input" onchange="changeSelect(this)" /></span>
      			<a href="javascript:nextDemo()">下一页</a>
      			<a href="javascript:endDemo()">尾页</a>
			</center>
		</div>
      <!-- <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">通知1</span>
          <span class="weui-badge" style="margin-left: 5px;">2</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">通知1</span>
         <span class="weui-badge" style="margin-left: 5px;"></span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">单行列表</span>
          <span class="weui-badge" style="margin-left: 5px;">1</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">今天快下雨了</span>
          <span class="weui-badge" style="margin-left: 5px;">1</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">单行列表</span>
          <span class="weui-badge" style="margin-left: 5px;">1</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">单行列表</span>
          <span class="weui-badge" style="margin-left: 5px;">8</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">单行列表</span>
          <span class="weui-badge" style="margin-left: 5px;">1</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
      <div class="weui-cell weui-cell_access">
        <div class="weui-cell__bd">
          <span style="vertical-align: middle">单行列表</span>
          <span class="weui-badge" style="margin-left: 5px;">1</span>
        </div>
        <div class="weui-cell__ft">详细信息</div>
      </div>
  	
  	</div> -->
  	
  	 
       <br/>
      <br/>
  	<div class="weui-tabbar" style="position: fixed;">
        <a th:href="@{/WHeadInfoController/intoMainPage}" class="weui-tabbar__item weui-bar__item--on">
         <!--  <span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">8</span> -->
          <div class="weui-tabbar__icon">
            
            <img th:src="@{/demos/images/icon_nav_button.png}" />
          </div>
          <p class="weui-tabbar__label">首页</p>
        </a>
        
        
        
        
        
        
        <!--判断是否登陆  -->
        <a href="javascript:void(0)" class="weui-tabbar__item" th:if="${session.EmployeeInfo!=null}"> 
          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_msg.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">菜单</p>
        </a>
        
        <a th:href="@{/WBizController/loginDemo}" class="weui-tabbar__item" th:if="${session.EmployeeInfo==null}"> 
          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_msg.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">菜单</p>
        </a>

		<!--判断是否登陆  -->
        <a th:href="@{/selectAllCustomers}" class="weui-tabbar__item" th:if="${session.EmployeeInfo!=null}">

          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_article.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">客户</p>
        </a>
         <a th:href="@{/WBizController/loginDemo}" class="weui-tabbar__item" th:if="${session.EmployeeInfo==null}">

          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_article.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">客户</p>
        </a>
        
        
        
        
        
        
        
        
        
        <a th:href="@{/WBizController/HeadPage}" class="weui-tabbar__item">
          <div class="weui-tabbar__icon">
            <img th:src="@{/demos/images/icon_nav_cell.png}" alt=""/>
          </div>
          <p class="weui-tabbar__label">我的</p>
        </a>
      </div>
  	
</body>
  </html>